class ClusterBubble {
  constructor(options) {
    this.cBubble = new TMap.DOMOverlay();

    this.cBubble.onClick = function() {
      this.emit('click');
    };
    this.cBubble.onInit = function (options) {
      this.content = options.content;
      this.position = options.position;
    };
    // 销毁时需要删除监听器
    this.cBubble.onDestroy = function() {
      this.dom.removeEventListener('click', this.onClick);
      this.removeAllListeners();
    };
    // 创建气泡DOM元素
    this.cBubble.createDOM = function () {
      let dom = document.createElement('div');
      dom.classList.add('cross-cluster-bubble');
      dom.innerText = this.content;
      dom.style.cssText = [
        'width: ' + (30 + parseInt(this.content) * 2) + 'px;',
        'height: ' + (30 + parseInt(this.content) * 2) + 'px;',
        'line-height: ' + (30 + parseInt(this.content) * 2) + 'px;',
      ].join(' ');

      // 监听点击事件，实现zoomOnClick
      this.onClick = this.onClick.bind(this);
      // pc端注册click事件，移动端注册touchend事件
      dom.addEventListener('click', this.onClick);
      return dom;
    };

    this.cBubble.updateDOM = function () {
      if (!this.map) {
        return;
      }
      // 经纬度坐标转容器像素坐标
      let pixel = this.map.projectToContainer(this.position);

      // 使文本框中心点对齐经纬度坐标点
      let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
      let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
      this.dom.style.transform = `translate(${left}, ${top})`;

      this.emit('dom_updated');
    };

    TMap.DOMOverlay.call(this.cBubble, options);
    return this.cBubble;
  }
}
export default ClusterBubble
